<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">访问统计</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 栅格 -->
            <el-row :gutter="20">
                <!-- 栅格 -->
                <el-row :gutter="20">
                    <el-col :span="14">
                        <div>合计访问量：{{sum}}</div>
                    </el-col>
                    <el-col :span="10">
                        <el-input placeholder="关键词" v-model="Visitdata" class="input-with-select" clearable
                            @clear="getVisit">
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </el-row>
            <!-- 表格 -->
            <el-table class="tabletop" :border="true" :data="VisittableData" style="width: 100%">
                <el-table-column label="日期">
                    <template slot-scope="scope">
                        {{ scope.row.ctime | dataFilter }}
                    </template>
                </el-table-column>
                <el-table-column prop="visit" label="访问量">
                </el-table-column>
                <el-table-column label="操作">
                    
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="Visitlist._page" :page-sizes="[10, 20, 30, 40]" :page-size="Visitlist._size" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { GetVisitList, TotalAccess } from '../api/Visit.js'
export default {
    data() {
        return {
            // 搜索框绑定数值
            Visitdata: '',
            // 数据存储
            VisittableData: [],
            // 分页器绑定的请求数据
            Visitlist: {
                _orderd: 'ctime',
                _page: 0,
                _size: 10
            },
            // 总条数
            total: 0,
            sum: 0
        }
    },
    created() {
        this.getVisit()
        this.totalAccess()
    },
    methods: {
        // 每页条数发生变化时
        handleSizeChange(val) {
            this.Visitlist._size = val
            this.getVisit()
        },
        // 页码发生变化时
        handleCurrentChange(val) {
            this.Visitlist._page = val
            this.getVisit()
        },
        // 搜索点击按钮
        async search() {
            const params = {
                _search: this.Visitdata,
                _orderd: this.Visitlist._orderd,
                _page: this.Visitlist._page,
                _size: this.Visitlist._size
            }
            const { data } = await GetVisitList(params)
            console.log(data);
            if (data.code !== 1) return this.$message.error('搜索视频管理列表内容失败')
            this.VisittableData = data.list
            this.total = data.pager.total
        },

        // 请求区😎😎😎😎😎
        // 列表数据渲染
        async getVisit() {
            const { data } = await GetVisitList(this.Visitlist)
            if (data.code !== 1) return this.$message.error('获取视频管理列表失败')
            // 数据赋值
            this.VisittableData = data.list
            // 总条数赋值
            this.total = data.pager.total
        },
        // 合计条数请求
        async totalAccess(){
            const { data } = await TotalAccess()
            console.log(data);
            this.sum = data.sum
        }
    }
}
</script>

<style>

</style>